import React, { Component } from 'react'
import '../assets/style/Calculator.less'
import { Select } from 'antd';
import * as echarts from 'echarts';
import "antd/dist/antd.css";
import {
    TooltipComponent,
    LegendComponent
} from 'echarts/components';
import {
    PieChart
} from 'echarts/charts';
import {
    CanvasRenderer
} from 'echarts/renderers';

echarts.use(
    [TooltipComponent, LegendComponent, PieChart, CanvasRenderer]
);


const { Option } = Select;
export default class Calculator extends Component {
    constructor(props) {
        super(props)
        this.state = {
            zongjia: 270,
            anjie: 1,
            daikuan: 27,
            valueType: '1',
            junjia: 27000,
            shoufu: 243,
            years: 1,
            yuehuankuan: 23350,
            lixi: 1
        }
        this.anjieChange = this.anjieChange.bind(this)
    }

    //echar图的展示
    show = (arr) => {
        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);
        myChart.setOption({
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '5%',
                left: 'center'
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '40',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: arr
                }
            ]
        })
    }
    handleChange = (value) => {
        if (value === '3室2厅1卫 100m²') {
            this.setState({
                zongjia: 270
            })
        } else if (value === '2室2厅1卫 80m²') {
            this.setState({
                zongjia: 216
            })
        }
    }
    loanType = (value) => {



        if (value === '3') {
            document.getElementById('group').style.visibility = "visible";
            document.getElementById('time').style = "position: relative;top: 0rem;"
            document.getElementById('result').style = "position: relative;top: 4rem;"
            this.setState({
                valueType: value
            })
        } else {
            document.getElementById('group').style.visibility = "hidden";
            document.getElementById('time').style = "position: relative;top: -13rem;"
            document.getElementById('result').style = "position: relative;top: -8rem;"
            this.setState({
                valueType: value
            })
        }
    }
    //本息还款的月还款额(参数: 年利率/贷款总额/贷款总月份)
    getMonthMoney = (lilv, total, month) => {
        var lilv_month = lilv / 12;//月利率
        return total * lilv_month * Math.pow(1 + lilv_month, month) / (Math.pow(1 + lilv_month, month) - 1);
    }
    componentDidMount() {
        document.getElementById('group').style.visibility = "hidden";
        document.getElementById('time').style = "position: relative;top: -13rem;"
        document.getElementById('result').style = "position: relative;top: -8rem;"
        var arr = [
            { value: 243, name: '参考首付' },
            { value: 27, name: '贷款金额' },
            { value: 1, name: '支付利息' }
        ]

        this.show(arr)
    }
    //判断表单里面输入的数字还行字母
    reg_Num(str) {
        if (str.length === 0) { return false; }
        var Letters = "1234567890.";

        for (let i = 0; i < str.length; i++) {
            //返回指定位置的字符串
            var CheckChar = str.charAt(i);
            if (Letters.indexOf(CheckChar) === -1) { return false; }
        }
        return true;
    }
    //计算钱数
    jisuan = (daikuan_sy, daikuan_gjj) => {
        var lilv_array = new Array;
        lilv_array[31] = new Array;
        lilv_array[31][1] = new Array;
        lilv_array[31][2] = new Array;
        lilv_array[31][1][5] = 0.069;//商贷 1～5年 5.75%
        lilv_array[31][1][10] = 0.0705;//商贷 5-30年 5.9%
        lilv_array[31][2][5] = 0.0350;//公积金 1～5年 3.5%
        lilv_array[31][2][10] = 0.0400;//公积金 5-30年 4.0%

        this.state.shoufu = this.state.zongjia - this.state.daikuan
        //贷款年数，5年 | 5年以上
        var year = this.state.years < 5 ? 5 : 10

        //还款期数
        var month = this.state.years * 12
        var lx, yhk
        if (this.state.valueType < 3) {

            //月还款

            yhk = Math.round(this.getMonthMoney(lilv_array[31][this.state.valueType][year], this.state.daikuan, month) * 10000) //月还款
            //应还利息
            lx = Math.round(yhk * month / 10000 - this.state.daikuan)

            this.setState({
                yuehuankuan: yhk,
                lixi: lx
            })

            var arr = [
                { value: this.state.shoufu, name: '参考首付' },
                { value: this.state.daikuan, name: '贷款金额' },
                { value: this.state.lixi, name: '支付利息' }
            ]

            this.show(arr)

        } else {

            var lilv_sd = lilv_array[31][1][year]; //得到商贷利率
            var lilv_gjj = lilv_array[31][2][year]; //得到公积金利率
            console.log(lilv_sd, lilv_gjj)
            if (!this.reg_Num(daikuan_sy) || !this.reg_Num(daikuan_gjj)) {
                alert('贷款金额必须为数字')
                // <Alert message="贷款金额必须为数字" type="error" showIcon />
                return
            }

            //组合钱数不可以超过贷款
            if (parseInt(daikuan_sy) + parseInt(daikuan_gjj) !== this.state.daikuan) {
                alert('贷款组合金额不正确')
            
               
                return;
            }
            //月还款
            var month_money = this.getMonthMoney(lilv_sd, daikuan_sy, month) + this.getMonthMoney(lilv_gjj, daikuan_gjj, month);//调用函数计算
            this.setState({
                yuehuankuan: Math.round(month_money * 10000)
            })


            //还款总额
            var all_total1 = month_money * month;
            //支付利息款
            this.setState({
                lixi: Math.round(all_total1 - this.state.daikuan)
            })
            var arr = [
                { value: this.state.shoufu, name: '参考首付' },
                { value: this.state.daikuan, name: '贷款金额' },
                { value: this.state.lixi, name: '支付利息' }
            ]

            this.show(arr)

        }



    }
    //选择的期数
    yearsChange = (value) => {
        this.setState({
            years: value
        })
    }
    //按揭的选择
    anjieChange(value) {
        var anjie = value
        var daikuan = Math.round(anjie / 100 * this.state.zongjia)
        this.setState({
            daikuan: daikuan,
            anjie: anjie
        })

    }
    btn() {

        var daikuan_sy = this.refs.val_loanbussiness.value
        var daikuan_gjj = this.refs.val_loanfund.value
        this.jisuan(daikuan_sy, daikuan_gjj)

    }
    render() {
        return (
            <div className="Calculatorbox">
                <div className="condition">
                    <div className="top">计算条件</div>
                </div>
                <div className="all">
                    <div className="right">
                        <div className="every">
                            <div>选择户型</div>
                            <Select defaultValue="3室2厅1卫 100m²" style={{ width: 300, marginTop: 10 }} onChange={this.handleChange}>
                                <Option value="2室2厅1卫 80m²">2室2厅1卫 80m²</Option>
                                <Option value="3室2厅1卫 100m²">3室2厅1卫 100m²</Option>
                            </Select>
                        </div>
                        <div className="every">
                            <div>估算总价</div>
                            <div className='zong'>{this.state.zongjia}万元<span style={{ color: '#ccc', fontSize: 20 }}>（均价27000元/m²）</span></div>
                        </div>
                        <div className="every">
                            <div>按揭成数</div>
                            <Select defaultValue="1成" style={{ width: 300, marginTop: 10 }} onChange={this.anjieChange}>
                                <Option value="10">1成</Option>
                                <Option value="20">2成</Option>
                                <Option value="30">3成</Option>
                                <Option value="40">4成</Option>
                                <Option value="50">5成</Option>
                                <Option value="60">6成</Option>
                                <Option value="70">7成</Option>
                                <Option value="80">8成</Option>
                                <Option value="90">9成</Option>
                            </Select>
                        </div>
                        <div className="every">
                            <div>贷款类别</div>
                            <Select defaultValue="商业贷款" style={{ width: 300, marginTop: 10 }} onChange={this.loanType}>
                                <Option value="1">商业贷款</Option>
                                <Option value="2">公积金贷款</Option>
                                <Option value="3">组合贷款</Option>
                            </Select>
                            <div id='group'>
                                <div style={{ color: '#ccc', fontSize: 28, marginTop: 20 }}>贷款金额</div>
                                <div style={{ color: '#000', marginTop: 15 }}>(贷款总额{this.state.daikuan}万)</div>
                                <div style={{ marginTop: 10 }}>
                                    <span style={{ color: '#000' }}>公积金</span>
                                    <input style={{ width: 100, marginTop: 10, marginLeft: 10, marginRight: 10, color: '#000' }} ref="val_loanfund" />
                                    <span style={{ color: '#000' }}>万元</span>
                                </div>
                                <div style={{ marginTop: 10 }}>
                                    <span style={{ color: '#000' }}>商业性</span>
                                    <input style={{ width: 100, marginTop: 10, marginLeft: 10, marginRight: 10, color: '#000' }} ref="val_loanbussiness" />
                                    <span style={{ color: '#000' }}>万元</span>
                                </div>
                            </div>
                        </div>
                        <div className="every1" id="time">
                            <div>贷款时间</div>
                            <Select defaultValue="1年（12期）" style={{ width: 300, marginTop: 10 }} onChange={this.yearsChange}>
                                <Option value="1">1年（12期）</Option>
                                <Option value="2">2年（24期）</Option>
                                <Option value="3">3年（36期）</Option>
                                <Option value="4">4年（48期）</Option>
                                <Option value="5">5年（60期）</Option>
                                <Option value="6">6年（72期）</Option>
                                <Option value="7">7年（84期）</Option>
                                <Option value="8">8年（96期）</Option>
                                <Option value="9">9年（108期）</Option>
                            </Select>
                        </div>
                    </div>
                    <div id="result">
                        <button onClick={this.btn.bind(this)}>计算</button>
                        <div className="left">
                            <div id="main" style={{ width: "350px", height: "400px"}} className="main"></div>
                            <div className="money">
                                <div className="month">月还款:<span>{this.state.yuehuankuan}元</span></div>
                                <div>支付利息:{this.state.lixi}万</div>
                                <div>参考首付:{this.state.shoufu}万</div>
                                <div>贷款金额:{this.state.daikuan}万</div>
                                <div style={{color:'#ccc'}} className="interest">（利率公积金4%，商业性7.05%）</div>
                            </div>

                        </div>
                    </div>

                </div>
            </div>
        )
    }
}
